import Patch from './patch.mdx'

# Taro webpack

## 安装

```bash npm2yarn
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss
```

<Patch />

## 配置

### 在你的根目录创建 `postcss.config.mjs`

```js title="postcss.config.mjs"
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
```

### 在你的 `app.css` 里面添加

```css
@import "weapp-tailwindcss";
```

### 注册插件

在项目的配置文件 `config/index` 中注册:

```js title="config/index.[jt]s"
import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack'
import path from 'node:path'
// 假如你使用 js 配置，则使用下方 require 的写法
// const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// const path = require('node:path')

{
  // 找到 mini 这个配置
  mini: {
    // postcss: { /*...*/ },
    // 中的 webpackChain, 通常紧挨着 postcss 
    webpackChain(chain, webpack) {
      // 复制这块区域到你的配置代码中 region start
      // highlight-start
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              // 这里可以传参数
              rem2rpx: true,
              cssEntries: [
                // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
                path.resolve(__dirname, '../src/app.css'),
              ],
            }],
          },
        },
      })
      // highlight-end
      // region end
    }
  }
}
```

> tailwindcss@4 必须配置 `cssEntries` 并且使用绝对路径，否则 `tailwindcss` 生成的类名不会参与转译。

## 运行

然后执行命令发布到微信小程序

```bash npm2yarn
npm run dev:weapp
```

微信开发者工具导入这个项目，即可看到效果

## 参考模板

https://github.com/icebreaker-template/taro-webpack-tailwindcss-v4
